<template>
    <div class="header">
        <img src="/public/static/LaserRadar/Logo.png" alt="Logo">
        <span>{{ LaserRadarComponent.Default.Title.value }}</span>
        <span>{{ LaserRadarComponent.Default.Status.value }}</span>
        <button class="reset" type="button"></button>
        <button class="reset" type="button" @click="OnExitAsync()"></button>
    </div>
</template>

<script setup lang="ts">
import LaserRadarComponent from './LaserRadarComponent';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import ModalComponent, { ModalOptions } from "@runtime/module/Modal/ModalComponent";
import WebSocketComponent from "@runtime/module/WebSocket/WebSocketComponent";
import PostProcessLayerComponent from '@runtime/UnityEngineBridge/PostProcessLayerComponent';

async function OnExitAsync(): Promise<void> {
    const volume = await PostProcessLayerComponent.Default.AddVolumeAsync();
    const effect = await PostProcessLayerComponent.Default.AddKawaseBlurAsync(volume);
    const options = ModalOptions.Default()
            .WithPrefix('/src/components/Apps/LaserRadar/')
            .WithType('Exit')
            .WithContent('是否确认退出软件?')
            .WithButtons(['确定', '取消']);
    const result = await ModalComponent.Default.PopupAsync(options);

    if (result == '确定') {
        WebSocketComponent.Default.PostMessage(new ClientMessage.ShutdownMessage());
    }

    await PostProcessLayerComponent.Default.RemoveEffectAsync(volume, effect);
    await PostProcessLayerComponent.Default.RemoveVolumeAsync(volume);
}
</script>

<style scoped>
.header {
    position: absolute;

    width: 100%;
    height: 6.2rem;

    background-color: #131520E6;

    display: flex;
    align-items: center;
    gap: 2rem;

    padding-left: 2rem;
    padding-right: 2rem;

    border-bottom: 0.1rem solid #36384B;
}

img {
    width: 3.2rem;
    height: 3.2rem;
}

span:first-of-type {
    flex-grow: 1;

    color: #B1B1D4;
    font-size: 2.4rem;
}

span:last-of-type {
    color: #81859C;
    font-size: 2.4rem;
}

button {
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

button:first-of-type {
    background-image: url('/public/static/LaserRadar/icon_setting.png');
}

button:last-of-type {
    background-image: url('/public/static/LaserRadar/icon_exit.png');
}
</style>